<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="Anthor" content="月影-253737688" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>图片居中</title>
    <style>
       a{ display: block;  text-decoration: none;padding: 20px ;color: #ff5c00}

       *{margin: 0; padding: 0}

       /*flex解决方案*/
       .tab ul{display: flex; }
       .tab ul li{
           width: 200px;
           height: 200px;
           display: flex;
           justify-content: center;
           align-items: center;
           border: 1px solid #23caff;
           margin: 20px;
       }
       .tab  ul li img{
           max-width: 100%;
           max-height: 100%;
       }

       /*jq解决方案*/

       #tab ul li{
           overflow: hidden;
           position: relative;
           float: left;
           width: 200px;
           height: 200px;
           border: 1px solid #23caff;
           margin: 20px;
           cursor: pointer;
       }
       #tab ul li img{
           position: absolute;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           margin: auto;
       }
    </style>
</head>
<body>

<a href="https://codepen.io/kingdil/pen/bopLJJ">flex解决方案</a>
<div class="tab">
    <ul>
        <li>
            <img src="img/2.jpg" alt="">
        </li>
        <li>
            <img src="img/3.jpg" alt="">
        </li>
        <li>
            <img src="img/5.jpg" alt="">
        </li>

    </ul>
</div>


<a href="https://codepen.io/kingdil/pen/qPZxoR">jq解决方案</a>


<div id="tab">
    <ul>
        <li>
            <img src="img/2.jpg" alt="">
        </li>
        <li>
            <img src="img/3.jpg" alt="">
        </li>
        <li>
            <img src="img/5.jpg" alt="">
        </li>


    </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var $tabLi = $("#tab").find("ul li"),
        length = $tabLi.length,
        liWidth = $tabLi.width(),
        propArr = [];
    $tabLi.each(function (i) {
        var $img = $(this).find("img");
        var width = $img.width();
        width?imgLoad.call($img[0]):($img[0].onload = imgLoad);
        function imgLoad() {
            var width = $(this).width();
            var height = $(this).height();
            propArr[i] = width/height;
            this[width>height?"width":"height"] = liWidth;
            for (var j = 0; j < length; j++)if ( !propArr[j] )return;
        }
    });
</script>
</body>
</html>